<template>
    <div class="a">
      <!--div class="a1" v-for="item in list" :key="item">{{item}}</div>-->
      <div v-for="(item,index) in list" :key="item.id || index" :class="index%2==0?'a2':'a1'" >{{item}}</div>
    </div> 

    <!--iv style="width: 10px;height: 20px;background-color: red;color: #fff;margin:5px;">1</div>
    <div style="width: 10px;height: 20px;background-color: red;color: #fff;margin:5px;">2</div>
    <div style="width: 10px;height: 20px;background-color: red;color: #fff;margin:5px;">3</div>
    <div style="width: 10px;height: 20px;background-color: red;color: #fff;margin:5px;">4</div>
    <div style="width: 10px;height: 20px;background-color: red;color: #fff;margin:5px;">5</div>
    <div style="width: 10px;height: 20px;background-color: red;color: #fff;margin:5px;">6</div>-->
    <div id="app" v-if="showLogin">
        <div class="min-h-screen bg-gradient-to-br from-blue-900 to-indigo-900 flex items-center justify-center p-4">
            <div class="w-full max-w-md">
                <!-- 登录/注册卡片 -->
                <div
                    class="bg-white rounded-xl shadow-2xl overflow-hidden transform transition-all duration-500 hover:shadow-4xl mydemo1">
                    <!-- 卡片头部 -->
                    <div class="p-6 bg-gradient-to-r from-blue-600 to-indigo-600 text-white">
                        <h2 class="text-2xl font-bold mb-2">{{ formType === 'login' ? '用户登录' : '用户注册' }}</h2>
                        <p class="text-blue-100">{{ formType === 'login' ? '欢迎回来，请登录您的账户' : '创建新账户，开启新体验' }}</p>
                    </div>

                    <!-- 表单 -->
                    <form @submit.prevent="submitForm" class="p-6 space-y-4">
                        <!-- 用户名 -->
                        <div class="space-y-2">
                            <label for="username" class="block text-sm font-medium text-gray-700">用户名</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-user text-gray-400"></i>
                                </div>
                                <input type="text" id="username" v-model="form.username"
                                    class="pl-10 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 transition-all"
                                    placeholder="请输入用户名">
                            </div>
                            <p v-if="errors.username" class="text-red-500 text-xs italic">{{ errors.username }}</p>
                        </div>

                        <!-- 密码 -->
                        <div class="space-y-2">
                            <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-lock text-gray-400"></i>
                                </div>
                                <input :type="showPassword ? 'text' : 'password'" id="password" v-model="form.password"
                                    class="pl-10 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 transition-all"
                                    placeholder="请输入密码">
                                <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
                                    <button type="button" @click="togglePasswordVisibility"
                                        class="text-gray-400 hover:text-gray-600 focus:outline-none">
                                        <i :class="showPassword ? 'fa fa-eye-slash' : 'fa fa-eye'"></i>
                                    </button>
                                </div>
                            </div>
                            <p v-if="errors.password" class="text-red-500 text-xs italic">{{ errors.password }}</p>
                        </div>

                        <!-- 注册额外字段 -->
                        <div v-if="formType === 'register'" class="space-y-2">
                            <label for="email" class="block text-sm font-medium text-gray-700">邮箱</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-envelope text-gray-400"></i>
                                </div>
                                <input type="email" id="email" v-model="form.email"
                                    class="pl-10 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 transition-all"
                                    placeholder="请输入邮箱">
                            </div>
                            <p v-if="errors.email" class="text-red-500 text-xs italic">{{ errors.email }}</p>
                        </div>

                        <!-- 提交按钮 -->
                        <button type="submit"
                            class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition-all duration-300 transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                            {{ formType === 'login' ? '登录' : '注册' }}
                        </button>

                        <!-- 切换表单类型 -->
                        <p class="text-center text-sm text-gray-600">
                            {{ formType === 'login' ? '还没有账户？' : '已有账户？' }}
                            <button type="button" @click="toggleFormType"
                                class="text-indigo-600 hover:text-indigo-900 font-medium transition-colors">
                                {{ formType === 'login' ? '立即注册' : '返回登录' }}
                            </button>
                        </p>
                    </form>
                </div>

            </div>
        </div>
    </div>
    <div v-else>
        <router-view />
    </div>


</template>

<script>
import { useRouter } from 'vue-router'

export default {
    name: 'LoginDoubao',

    data() {
        return {
            list:[2,4,5,5,6,7,8,9,3,6,1,2,3,4,5,0,77],
            formType: 'login', // 表单类型：login 或 register
            form: {
                username: '',
                password: '',
                email: ''
            },
            errors: {
                username: '',
                password: '',
                email: ''
            },
            showPassword: false,
            showLogin: true,
        }
    },

    computed: {
        router() {
            return useRouter()
        }
    },

    mounted() {
        sessionStorage.getItem('showLogin') == '0' ? this.showLogin = false : this.showLogin = true
        console.log('this.showLogin',this.showLogin);
        
        let router = useRouter()
        console.log('router:', router.currentRoute.value.path);
        this.$nextTick(() => {
            setTimeout(() => {
                let tag1 = sessionStorage.getItem('showLogin')
                console.log('tag1:', tag1);

                if (router.currentRoute.value.path === '/' || router.currentRoute.value.path === '/LoginDoubao') {
                    this.showLogin = true
                    sessionStorage.setItem('showLogin', '1')
                }
                if(!this.showLogin){
                    this.$router.push('/DataBind')
                }
            }
            )
        })
    },

    methods: {
        // 切换表单类型
        toggleFormType() {
            this.formType = this.formType === 'login' ? 'register' : 'login'
            // 清空表单和错误
            this.resetForm()
        },

        // 切换密码可见性
        togglePasswordVisibility() {
            this.showPassword = !this.showPassword
        },

        // 重置表单
        resetForm() {
            this.form.username = ''
            this.form.password = ''
            this.form.email = ''

            Object.keys(this.errors).forEach(key => {
                this.errors[key] = ''
            })
        },

        // 表单验证
        validateForm() {
            let isValid = true

            // 清空之前的错误
            Object.keys(this.errors).forEach(key => {
                this.errors[key] = ''
            })

            // 验证用户名
            if (!this.form.username.trim()) {
                this.errors.username = '用户名不能为空'
                isValid = false
            }

            // 验证密码
            if (!this.form.password) {
                this.errors.password = '密码不能为空'
                isValid = false
            } else if (this.form.password.length < 6) {
                this.errors.password = '密码长度不能少于6位'
                isValid = false
            }

            // 如果是注册表单，验证邮箱
            if (this.formType === 'register') {
                if (!this.form.email) {
                    this.errors.email = '邮箱不能为空'
                    isValid = false
                } else if (!/\S+@\S+\.\S+/.test(this.form.email)) {
                    this.errors.email = '请输入有效的邮箱地址'
                    isValid = false
                }
            }

            return isValid
        },

        // 提交表单
        submitForm() {
            if (!this.validateForm()) return

            // 模拟API调用
            const apiEndpoint = this.formType === 'login' ? '/api/login' : '/api/register'

            console.log(`正在提交${this.formType === 'login' ? '登录' : '注册'}请求到:`, apiEndpoint)
            console.log('表单数据:', {
                username: this.form.username,
                password: this.form.password,
                ...(this.formType === 'register' ? { email: this.form.email } : {})
            })

            // 模拟API响应延迟
            setTimeout(() => {
                // 模拟成功
                const success = true

                if (success) {
                    // 保存登录状态
                    sessionStorage.setItem('showLogin', '0')
                    sessionStorage.setItem('user', JSON.stringify({
                        username: this.form.username,
                        role: 'user'
                    }))
                    this.showLogin = false

                    // 导航到首页或其他页面
                    this.$router.push('/DataBind')
                } else {
                    // 显示错误信息
                    if (this.formType === 'login') {
                        this.errors.username = '用户名或密码不正确'
                    } else {
                        this.errors.username = '注册失败，请稍后再试'
                    }
                }
            }, 1000)
        }
    }
}
</script>

<style scoped>
/* 引入字体图标 */
@import url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css');

/* 全局样式 */
body {
    font-family: 'Inter', system-ui, sans-serif;
}

/* 动画效果 */
button {
    transition: all 0.3s ease;
}

input {
    transition: all 0.2s ease;
    margin-bottom: 0;
}

.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
}

.mydemo1 {
    width: 25%;
    background-color: rgb(241, 241, 241);
}

.max-w-md {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-top: 200px;
}

/* .p-4{
    background-color: rgb(211, 250, 255);
  } */
#app {
    width: 99vw;
    height: 98vh;
    background-color: rgb(211, 250, 255);
}

.space-y-2 {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.relative {
    display: flex;
}

.pointer-events-none {
    margin: 0 13px 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.italic {
    color: red;
    font-size: 12px;
    margin-left: 5px;
}
.a{
    display:flex;
    flex-direction:colum;
    justify-content:stretch;
    align-items:baseline;
    align-content:flex-start;
    height:400px;
    width:1000px;
    background-color:rgb(247, 247, 108);
    flex-wrap:wrap;
}
a1{
    align-items:flex-start;
    margin:50px;
    background-color:rgb(22, 227, 227);
    color:red;
}
.a2{
   align-items:flex-start;
   margin:80px;
   background-color:rgb(53, 223, 209);
   color:rgb(220, 35, 177);

}
</style>